<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="开工日期" prop="start_time">
      <el-date-picker v-model="ruleForm.start_time" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" type="datetime" placement="bottom-end" :picker-options="optionsDisable" @change="onchangeTime" placeholder="开工日期"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')" v-hasPermi="['admin:work:delay']">提交</el-button>
      <el-button @click="resetForm('ruleForm')">取消</el-button>
    </el-form-item>

    </el-form>
</template>

<script>
  import { workDelayApi } from '@/api/workApi'
  import {Debounce} from '@/utils/validate'
  const defaultObj = {
    id : null,
    start_time: null,
  }
  export default {
    name: "WorkEditDelay",
    props:{
      id: {
        type: Number,
        default: null
      },
      time:{
        type: String
      }
    },
    data() {
      return {
        ruleForm: Object.assign({}, defaultObj),
        rules: {
          start_time: [{ required: true, message: '请选择开工日期', trigger: ['blur', 'change'] }],
        },
        specifyDate:'',
        optionsDisable: {
          disabledDate:time=> {
            //禁用
            const date = new Date(this.specifyDate);
            if (!this.isNull(date)) {
              const day = 7 * 24 * 3600 * 1000;
              const dateRegion = date.getTime() + day;
              return (
                //禁用小于开始时间和大与开始时间一周后的日期
                //new Date(time).getTime() > dateRegion ||
                new Date(time).getTime() < date.getTime()
              );
            } else {
              return false;
            }
            //return time.getTime() > Date.now();
          },
        },
      }
    },
    mounted() {
      this.ruleForm = {
        //本身注释
        id : this.id,
        start_time: this.time,
      }
      this.specifyDate = this.time
    },
    methods: {
      // 检查是否为空
      isNull(value) {
        if (value) {
          return false
        }
        return true
      },
      onchangeTime (e) {
        this.ruleForm.start_time = e;
      },

      submitForm:Debounce(function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            workDelayApi(this.ruleForm).then(async res => {
              this.$message.success('延期成功')
              this.$parent.$parent.visibleDelay = false
              this.$parent.$parent.getList()
            })
          } else {
            return false;
          }
        });
      }),
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$emit('resetDelayForm');
      }
    }
  }
</script>

<style scoped>
 .selWidth{
   width: 90%;
 }
</style>
